<!--
 * @Description: 登录注册页面
 * @question: 页面++6排版
 * @Author: 梁晓雨
 * @Date: 2025-01-23 00:22:58
-->

<template>
  <div class="common-layout">
    <el-container class="common-layout">
      <el-aside class="aside-layout">
        <svg height="100%" node-id="1" sillyvg="true" template-height="1024" template-width="1024" version="1.1"
          viewBox="0 0 1024 1024" width="1024" xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink">
          <defs node-id="28">
            <mask height="225.19662" id="mask-2" maskUnits="userSpaceOnUse" node-id="18" width="208.63748" x="509.37943"
              y="286.9606">
              <path
                d="M 411.80 420.20 L 526.80 429.00 L 526.80 493.40 L 562.70 454.40 L 573.10 583.90 L 700.60 305.70 Z"
                fill="#ffffff" fill-rule="evenodd" node-id="33" stroke="none" target-height="278.2" target-width="288.8"
                target-x="411.8" target-y="305.7" />
            </mask>
          </defs>
          <g node-id="59">
            <g node-id="60">
              <path d="M 284.70 419.20 L 628.90 419.20 L 664.00 716.80 L 249.60 716.80 Z" fill="#eeeeee"
                fill-rule="evenodd" group-id="1,2" id="矩形" node-id="9" stroke="none" target-height="297.59998"
                target-width="414.4" target-x="249.6" target-y="419.2" />
              <path
                d="M 652.70 620.80 L 664.00 716.80 L 249.60 716.80 L 260.90 620.80 L 418.60 620.80 L 419.30 628.60 L 421.60 635.80 L 423.80 640.20 L 426.50 644.30 L 429.80 648.00 L 433.40 651.20 L 437.50 653.90 L 441.90 656.20 L 449.00 658.40 L 456.80 659.20 L 464.60 658.40 L 471.70 656.20 L 476.10 653.90 L 480.20 651.20 L 483.90 648.00 L 487.10 644.30 L 489.80 640.20 L 492.10 635.80 L 494.30 628.60 L 495.10 620.80 L 652.70 620.80 Z"
                fill="#d8d8d8" fill-rule="evenodd" group-id="1,2" id="形状结合" node-id="10" stroke="none"
                target-height="96" target-width="414.4" target-x="249.6" target-y="620.8" />
            </g>
            <path
              d="M 597.40 342.00 L 500.10 368.10 L 498.90 356.50 L 498.40 345.80 L 498.50 335.70 L 499.00 326.40 L 500.10 317.70 L 501.70 309.70 L 503.70 302.20 L 506.10 295.20 L 508.90 288.70 L 512.10 282.60 L 515.80 277.00 L 520.30 271.00 L 525.40 265.20 L 531.00 259.50 L 537.20 254.10 L 544.00 248.80 L 551.40 243.70 L 559.60 238.70 L 568.40 234.00 L 578.00 229.50 L 588.40 225.10 L 602.20 225.10 L 601.00 228.60 L 600.80 231.70 L 601.30 236.70 L 602.20 240.20 L 602.90 241.30 L 606.40 243.70 L 611.20 244.90 L 613.90 245.10 L 617.20 244.90 L 621.20 244.20 L 757.60 215.10 L 758.10 215.20 L 758.30 216.00 L 739.20 228.10 L 739.70 231.40 L 739.60 236.20 L 739.10 239.00 L 738.10 241.60 L 736.50 244.20 L 734.60 246.00 L 731.20 248.30 L 725.70 251.30 L 717.30 255.10 L 715.00 260.90 L 713.90 263.00 L 712.30 264.80 L 710.30 266.10 L 708.00 266.80 L 691.50 270.40 L 677.20 274.00 L 664.90 277.60 L 654.50 281.10 L 645.70 284.60 L 638.30 288.00 L 632.20 291.30 L 627.20 294.50 L 623.20 297.60 L 620.00 300.60 L 614.60 306.80 L 610.00 312.90 L 606.20 318.90 L 603.00 324.70 L 600.60 330.50 L 598.70 336.30 L 597.40 342.00 Z"
              fill="#ffffff" fill-rule="evenodd" group-id="1" id="路径-29" node-id="11" stroke="#000000"
              stroke-linecap="butt" stroke-width="3.2" target-height="153" target-width="259.9" target-x="498.4"
              target-y="215.1" />
            <path d="M 727.80 230.40 L 740.50 230.40 L 740.50 233.60 L 727.80 233.60 Z" fill="#000000"
              fill-rule="evenodd" group-id="1" id="矩形" node-id="12" stroke="none" target-height="3.2000122"
              target-width="12.700012" target-x="727.8" target-y="230.4" />
            <path d="M 715.00 224.00 L 718.20 224.00 L 718.20 256.00 L 715.00 256.00 Z" fill="#000000"
              fill-rule="evenodd" group-id="1" id="矩形" node-id="13" stroke="none" target-height="32"
              target-width="3.2000122" target-x="715" target-y="224" />
            <path
              d="M 602.80 182.70 L 605.40 182.00 L 607.90 181.70 L 610.50 182.00 L 612.90 182.70 L 615.10 183.90 L 617.10 185.50 L 618.70 187.50 L 620.00 189.80 L 620.70 192.30 L 621.00 194.80 L 621.00 217.70 L 620.30 222.40 L 619.60 224.50 L 617.30 228.40 L 614.10 231.60 L 610.30 233.90 L 605.80 235.10 L 603.40 235.20 L 600.20 235.10 L 595.90 233.90 L 593.00 232.40 L 590.40 230.40 L 588.30 227.90 L 586.60 225.10 L 585.80 223.00 L 585.00 218.50 L 584.20 203.20 L 584.20 200.40 L 584.70 197.70 L 585.60 195.20 L 588.40 190.70 L 590.30 188.80 L 592.50 187.30 L 595.00 186.00 Z"
              fill="#ffffff" fill-rule="evenodd" group-id="1" id="矩形" node-id="14" stroke="#000000"
              stroke-linecap="butt" stroke-width="3.2" target-height="53.5" target-width="36.799988" target-x="584.2"
              target-y="181.7" />
            <path
              d="M 619.60 185.10 L 620.70 187.10 L 621.10 189.00 L 621.20 190.80 L 620.00 194.50 L 618.80 196.70 L 610.10 208.10 L 603.10 215.60 L 599.60 218.70 L 596.00 221.40 L 592.50 223.40 L 586.80 225.90 L 580.50 227.70 L 577.30 228.10 L 574.20 227.80 L 570.30 226.50 L 568.40 225.20 L 568.20 224.60 L 568.20 223.20 L 568.70 218.00 L 568.40 216.40 L 567.60 214.80 L 564.90 212.30 L 561.00 209.90 L 555.70 203.40 L 556.90 201.40 L 565.90 192.10 L 571.70 188.10 L 578.30 184.70 L 584.50 182.30 L 592.20 180.50 L 597.30 179.90 L 602.40 179.60 L 607.00 179.80 L 611.30 180.50 L 614.80 181.50 L 616.90 182.60 L 618.50 183.70 L 619.60 185.10 Z"
              fill="#000000" fill-rule="evenodd" group-id="1" id="路径-28" node-id="15" stroke="none" target-height="48.5"
              target-width="65.5" target-x="555.7" target-y="179.6" />
            <path
              d="M 371.90 604.50 L 386.00 593.70 L 398.60 583.30 L 409.90 573.40 L 419.90 564.00 L 428.80 554.90 L 436.50 546.20 L 443.30 537.90 L 449.20 530.00 L 454.20 522.40 L 458.40 515.10 L 460.90 509.70 L 462.80 504.50 L 464.20 499.40 L 464.90 494.30 L 465.20 489.20 L 465.00 484.20 L 464.30 479.40 L 463.10 474.80 L 461.50 470.20 L 459.50 466.00 L 457.10 462.00 L 454.30 458.20 L 451.20 454.70 L 447.70 451.60 L 443.90 448.90 L 439.80 446.40 L 435.50 444.50 L 430.90 443.00 L 426.00 441.90 L 420.80 441.40 L 415.70 441.30 L 410.30 441.90 L 404.60 443.00 L 398.70 444.80 L 392.90 447.20 L 387.80 449.80 L 383.30 452.70 L 379.40 455.80 L 375.60 459.40 L 372.40 463.10 L 369.60 467.00 L 367.20 471.00 L 364.60 476.70 L 362.60 482.40 L 361.20 488.30 L 360.30 494.30 L 359.90 500.10 L 360.00 505.80 L 360.60 511.50 L 361.40 516.70 L 362.70 521.50 L 364.30 526.20 L 366.00 530.10 L 367.90 533.40 L 371.90 537.90 L 374.80 540.30 L 378.00 542.30 L 381.80 544.20 L 386.30 545.90 L 391.00 547.10 L 396.30 548.00 L 402.60 548.40 L 408.80 548.30 L 415.80 547.50 L 423.90 546.00 L 436.00 542.60 L 450.40 536.90 L 465.10 529.50 L 482.30 519.20 L 499.80 507.10 L 519.90 491.30 L 540.30 473.50 L 563.40 451.20 L 683.10 331.00 L 777.60 236.80"
              fill="none" group-id="1" id="路径-30" node-id="16" stroke="#3450e4" stroke-dasharray="9.6 9.6"
              stroke-linecap="round" stroke-width="3.2" target-height="367.7" target-width="417.69998" target-x="359.9"
              target-y="236.8" />
            <g node-id="61">
              <g node-id="63">
                <path
                  d="M 411.80 420.20 L 526.80 429.00 L 526.80 493.40 L 562.70 454.40 L 573.10 583.90 L 700.60 305.70 Z"
                  fill="#5478eb" fill-rule="evenodd" group-id="1,3,5" node-id="52" stroke="none" target-height="278.2"
                  target-width="288.8" target-x="411.8" target-y="305.7" />
              </g>
              <path d="M 526.80 429.00 L 700.60 305.70 L 526.80 493.40 Z" fill="#3251e6" fill-rule="evenodd"
                group-id="1,3,6" node-id="57" stroke="none" target-height="187.69998" target-width="173.79999"
                target-x="526.8" target-y="305.7" />
            </g>
            <path
              d="M 740.50 372.80 L 741.10 372.90 L 742.00 373.80 L 742.10 377.60 L 745.90 377.70 L 746.80 378.60 L 746.90 379.20 L 746.80 379.80 L 745.90 380.70 L 742.10 380.80 L 742.00 384.70 L 741.10 385.50 L 740.50 385.60 L 739.90 385.50 L 739.00 384.70 L 738.90 380.80 L 735.10 380.70 L 734.30 379.80 L 734.10 379.20 L 734.30 378.60 L 735.10 377.70 L 738.90 377.60 L 739.00 373.80 L 739.90 372.90 L 740.50 372.80 Z"
              fill="#3450e4" fill-rule="evenodd" group-id="1" id="形状结合" node-id="22" stroke="none"
              target-height="12.800018" target-width="12.800049" target-x="734.1" target-y="372.8" />
            <path
              d="M 308.60 376.00 L 308.00 379.40 L 307.30 380.90 L 305.80 382.80 L 303.80 384.30 L 302.40 385.00 L 299.00 385.60 L 295.70 385.00 L 294.20 384.30 L 292.20 382.80 L 290.70 380.90 L 289.60 377.80 L 289.40 376.00 L 290.00 372.70 L 290.70 371.20 L 292.20 369.20 L 294.20 367.70 L 295.70 367.00 L 299.00 366.40 L 302.40 367.00 L 303.80 367.70 L 305.80 369.20 L 307.30 371.20 L 308.00 372.70 L 308.60 376.00 Z"
              fill="none" group-id="1" id="椭圆形" node-id="23" stroke="#3450e4" stroke-linecap="butt" stroke-width="3.2"
              target-height="19.200012" target-width="19.200012" target-x="289.4" target-y="366.4" />
            <g node-id="62">
              <path
                d="M 378.50 248.80 L 385.60 256.10 L 385.60 257.30 L 385.30 257.80 L 384.10 258.30 L 383.00 257.80 L 375.90 250.50 L 375.90 249.30 L 376.80 248.40 L 378.00 248.40 L 378.50 248.80 Z"
                fill="#3450e4" fill-rule="evenodd" group-id="1,4" id="矩形" node-id="24" stroke="none"
                target-height="9.899994" target-width="9.700012" target-x="375.9" target-y="248.4" />
            </g>
            <path
              d="M 498.70 370.10 L 502.20 377.00 L 506.10 383.30 L 510.40 389.20 L 515.20 394.70 L 520.40 399.70 L 526.10 404.30 L 532.40 408.50 L 537.50 411.50 L 544.00 414.70 L 582.10 431.90 L 596.80 439.80 L 603.10 443.90 L 607.00 446.90 L 613.10 452.80 L 615.40 456.00 L 617.10 459.20 L 618.00 462.50 L 618.80 468.30 L 619.30 475.80 L 619.40 485.30 L 619.00 497.20 L 618.00 511.70 L 616.30 529.30 L 613.70 550.50 L 670.30 550.50 L 674.80 533.40 L 678.50 517.80 L 681.30 503.50 L 683.40 490.40 L 684.80 478.50 L 685.60 467.70 L 685.80 457.90 L 685.50 449.00 L 684.70 440.90 L 683.50 433.60 L 681.90 427.00 L 680.20 421.80 L 676.40 413.10 L 674.20 409.40 L 670.90 404.70 L 667.40 400.60 L 663.70 397.00 L 659.70 393.80 L 651.60 388.60 L 645.30 385.30 L 622.30 375.40 L 618.00 372.80 L 613.60 369.40 L 609.80 365.80 L 606.50 361.80 L 603.90 357.70 L 601.70 353.20 L 600.00 348.40 L 598.80 343.30 L 498.70 370.10 Z"
              fill="#000000" fill-rule="evenodd" group-id="1" id="路径-32" node-id="25" stroke="none"
              target-height="207.20001" target-width="187.09998" target-x="498.7" target-y="343.3" />
            <path
              d="M 619.20 547.20 L 617.40 555.40 L 616.50 562.00 L 616.20 567.30 L 616.50 571.50 L 617.20 574.70 L 618.20 577.20 L 619.50 579.20 L 621.10 580.60 L 623.00 581.60 L 625.30 582.20 L 672.10 587.90 L 673.40 587.80 L 674.50 587.20 L 675.30 586.30 L 675.70 585.10 L 675.60 583.80 L 675.00 582.70 L 663.40 568.60 L 659.90 563.00 L 657.70 556.90 L 657.10 553.70 L 656.90 547.20 L 619.20 547.20 Z"
              fill="#ffffff" fill-rule="evenodd" group-id="1" id="路径-33" node-id="26" stroke="#000000"
              stroke-linecap="butt" stroke-width="3.2" target-height="40.700012" target-width="59.5" target-x="616.2"
              target-y="547.2" />
          </g>
        </svg>
      </el-aside>
      <el-container class="other-layout">
        <el-header class="header-layout">
          <div class="header-content">
            <h1>欢迎回到我们的博客！</h1>
            <h2>请登录系统</h2>
          </div>

        </el-header>
        <el-main class="main-layout">
          <div class="form-div">
            <div class="status-div">
              <el-button type="primary" text @click="buttonClickLogin">登录</el-button>
              <el-button type="primary" text @click="buttonClickRegis">注册</el-button>
            </div>
            <div class="login-form" v-if="!status">
              <el-form ref="formLoginRef" :model="formLogin" :rules="rulesLogin" label-width="80px"
                style="max-width: 350px;">
                <el-form-item label="邮箱" prop="email" style="margin-bottom: 10%;margin-top: 10%;">
                  <el-input placeholder="请填写邮箱号" :maxLength="20" v-model="formLogin.email"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" style="margin-bottom: 10%;">
                  <el-input placeholder="请填写密码" :maxlength="20" v-model="formLogin.password"></el-input>
                </el-form-item>
                <el-form-item style="margin-bottom: 10%;">
                  <el-button type="primary" @click="onSubmitFormLogin(formLoginRef)">确定</el-button>
                  <el-button type="warning" @click="onSubmitVisioterLogin">游客登录</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="regis-form" v-if="status">
              <el-form ref="formRegisRef" :model="formRegis" :rules="rulesRegis" label-width="80px"
                style="max-width: 350px;">
                <el-form-item label="邮箱" prop="email">
                  <el-input placeholder="请填写邮箱号" :maxLength="20" v-model="formRegis.email"></el-input>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                  <el-input placeholder="请填写用户名" :maxLength="20" v-model="formRegis.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input placeholder="请输入密码" :maxlength="20" v-model="formRegis.password"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="verify">
                  <el-input placeholder="请输入验证码" :maxlength="20" v-model="formRegis.verify"
                    style="width: 70%;margin-right: 1%;"></el-input>
                  <el-button type="primary" @click="toSend" style="width: 29%;">发送验证码</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmitFormRegis(formRegisRef)">确定</el-button>

                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { reactive } from 'vue'
import request from "../../src/utils/request";
// 导入了一些element-plus图标
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { getCurrentInstance, onMounted } from "vue";
import router from '@/router';
import { User } from '@/store';  // 引入 store 中的 State 类型
import { useStore } from 'vuex';
// 获取_this
const instance = getCurrentInstance()
// 引入store
const store = useStore();
// 登录注册按钮状态
const status = ref(false)
// 登录注册按钮click事件函数
function buttonClickLogin() {
  status.value = !status.value
}
function buttonClickRegis() {
  status.value = !status.value
}
// 登录表单验证规则
interface RuleFormLogin {
  email: string,
  password: string
}
const formLoginRef = ref<FormInstance>()
const formLogin = reactive<RuleFormLogin>({
  email: '',
  password: ''
})
const formLoginByVisitor = reactive<RuleFormLogin>({
  email: '1',
  password: '1'
})
const rulesLogin = reactive<FormRules<RuleFormLogin>>({
  email: [
    { required: true, message: '请输入你的邮箱号', trigger: 'blur' },
    { min: 10, max: 20, message: '你的邮箱号长度不正常，请重新输入', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入你的密码' }
  ],

})
// 注册表单验证规则
interface RuleFormRegis {
  email: string,
  username: string,
  password: string,
  verify: string
}
const formRegisRef = ref<FormInstance>()
const formRegis = reactive<RuleFormRegis>({
  email: '',
  username: '',
  password: '',
  verify: ''
})
const rulesRegis = reactive<FormRules<RuleFormRegis>>({
  email: [
    { required: true, message: '请输入你的邮箱号', trigger: 'blur' },
    { min: 10, max: 20, message: '你的邮箱号长度不正常，请重新输入', trigger: 'blur' }
  ],
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 4, max: 12, message: '用户名最短4个字，最长12个字', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入你的密码' }
  ],
  verify: [
    { required: true, message: '请输入验证码' }
  ]
})

// 登录表单确定函数
// const fetchUser = async () => {

//   try {
//     const res = 
//     return res.data; // 直接返回响应的 data
//   } catch (error) {
//     console.log("登录请求失败", error);
//     return false; // 请求失败时返回 false
//   }


// }
const onSubmitFormLogin = async (formEl: FormInstance | undefined) => {

  if (!formEl) return

  formEl.validate(async (valid, fields) => {
    if (valid) {

      try {
        await request.post("/user/login", formLogin);


        const res = await request.get('/user/queryAll', {
          params: formLogin
        })

        const userNew: User = {
          userId: res.data[0].userid,
          username: res.data[0].username,
          email: res.data[0].email,
          rights: res.data[0].rights
        }

        store.dispatch('setUser', userNew)

        ElMessage({
          message: "登录成功",
          type: "success"
        })
        router.push('/blogHomePage')
      } catch (error) {
        ElMessage({
          message: "登录失败",
          type: "error"
        })
      }

    } else {

      ElMessage({
        message: '请重新输入',
        type: 'error'
      })

    }
  })
}
// 注册时发送邮件验证码函数
const toSend = async () => {
  const user = {
    email: formRegis.email,
    password: formRegis.password,
    username: formRegis.username
  }
  try {
    await request.post('/user/getEmail', user)
    ElMessage({
      message: "发送邮件成功",
      type: 'success'
    })
  } catch (error) {
    console.log("发送邮件请求失败", error);
  }

}
// 注册表单确定函数
const onSubmitFormRegis = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {

      try {
        const user = {
          email: formRegis.email,
          password: formRegis.password,
          username: formRegis.username
        }
        request.put('/user/regis', user, {
          params: {
            code: formRegis.verify
          }
        })

        ElMessage({
          message: '注册成功，请切换到登录表单',
          type: 'success'
        })
      } catch (error) {
        console.log("注册失败", error);
        ElMessage({
          message: '注册失败',
          type: 'error'
        })
      }


    } else {
      ElMessage({
        message: '表单不符合条件',
        type: 'error'
      })
    }
  })
}

/**
 * @description: 以游客身份登录系统
 * @Author: 梁晓雨
 * @Date: 2025-03-26 22:37:58
 */
const onSubmitVisioterLogin = async () => {

  try {
    await request.post("/user/login", formLoginByVisitor);

    const res = await request.get('/user/queryAll', {
      params: formLoginByVisitor
    })
    const userNew: User = {
      userId: res.data[0].userid,
      username: res.data[0].username,
      email: res.data[0].email,
      rights: res.data[0].rights
    }
    store.dispatch('setUser', userNew)

    ElMessage({
      message: "登录成功",
      type: "success"
    })
    router.push('/blogHomePage')
  } catch (error) {
    ElMessage({
      message: "登录失败",
      type: "error"
    })
  }
}


</script>
<style lang="scss" scoped>
@use "./HelloWorld.scss" as *;
</style>
